<template>
  <div class="card" :class="{red: couponType === 1, car: couponType === 2}" :style="{color: color}">
    <p v-if="couponType === 1"><span>￥</span><strong>{{ couponMoney }}</strong> 元</p>
    <p v-else><strong>{{ couponMoney }}</strong> %</p>    
    <p>有效期至：{{ expireDate }}</p>
    <p>{{ remark }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      couponType: {
        type: Number,
        default: 2 // or 2
      },
      color: {
        type: String,
        default: '#ff4133' // or '#3fadf9'
      },
      couponMoney: {
        type: Number,
        default: 0
      },
      remark: {
        type: String,
        default: ''
      },
      expireDate: {
        type: String,
        default: ''
      }
    },
    data () {
      return {}
    }
  }
</script>

<style lang='scss' scoped>

  .card {
    box-sizing: border-box;
    padding: 30px 0 0 30px;
    height: 100%;
    background-size: cover;
    &.red {
      background-image: url('../../assets/dikoujuan@3x.png');
    }
    &.car {
      background-image: url('../../assets/jiaxijuan@3x.png');
    }
    p {
      font-size: 24px;
      line-height: 44px;
      width: 550px;
      &:nth-child(1) {
        font-size: 42px;
        margin-bottom: 15px;
        margin-top: 5px;
        span {
          font-size: 38px;
        }
        strong {
          font-size: 72px;
        }
      }
    }
  }
</style>
